<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类选择器</title>
		<style>
			/* 伪类选择器   语法：任意选择器：hover【悬停】  每个伪类选择器，具备特点 
			               所有元素具备hover 【常见的一种伪类选择器】
			*/
		   h1:hover{
			   background-color: black;
			   color: red;
		   }
		
		   /* 伪类选择器：link  连接未被点击时
			             active 连接被点击时
						visited 连接被访问时
						hover 悬停时
			  主要结合在一起，针对a元素效果
			*/
		   a{
			   font-size: 30px;
		   }
		   a:link{ /*未访问状态*/
			  color: red; 
			  text-decoration: none;
			  background-color: aqua;
		   }
		   a:visited{
			   background-color: black;
		   }
		   a:active{
			   color: black;
			   background-color: blue;
			   
		   }
		   a:hover{
			   font-size: 36px;
		   }
		   /* 伪类选择器：input：focus 获取焦点 鼠标点击输入框时效果 */
		   input:focus{
			   background-color: aqua;
		   }
		   /* 伪类选择器：fiest-child 第一个儿子元素
			             last-child 最后一个儿子元素
						nth-child(n)匹配n个儿子元素
			  针对：父子级，默认父子级 table\列表
			*/
		   li:first-child{
			   background-color: aquamarine;
			   color: red;
		   }
		</style>
	</head>
	<body>
		<h1>鼠标悬停</h1>
		<a href="#">超链接</a>
		<input type="text" />
		<!-- 元素之间存在父子级关系，默认存在父子关系 -->
		<ol>
			<li>唐三</li>
			<li>形态</li>
			<li>城的</li>
			<li>保定</li>
		</ol>
		
	</body>
</html>